<template>
    <div>
        <el-form :model="form" style="margin:20px;">
            <el-form-item label="UID：" label-width="80px">
                <el-row>
                    <el-col :span="4">
                        <el-input @keyup.enter.native="submit" v-model="form.uid" placeholder="" size="small"></el-input>
                    </el-col>
                    <el-col :span="4" :push="1">
                        <el-button type="primary" @click="submit">تەكشۈرۈش</el-button>
                        <el-button type="danger" @click="reset">قايتۇرۇش</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" stripe border :data="list.list">
            <el-table-column label="تەرتىپى">
                <template slot-scope="{row,$index}">
                    <span>{{pageSize*(pageNo-1)+$index+1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="UID" prop="uid"></el-table-column>
            <el-table-column label="تاپشۇرغان پۇلى" prop="money">
                <template slot-scope="{row}">
                    {{Math.round(row.money/100)}}￥
                </template>
            </el-table-column>
            <el-table-column label="زاكاس نومۇرى" prop="orderId"></el-table-column>
            <el-table-column label="باش سۈرەت">
                <template slot-scope="{row}" v-if="row.user_info">
                    <el-image lazy :src="handleJSON(row.user_info).avatarUrl"></el-image>
                    <br>
                    <span>{{handleJSON(row.user_info).openId}}</span>
                </template>
            </el-table-column>
            <el-table-column label="زاكاس تۈرى" prop="type">
                <template slot-scope="{row}">
                    <span v-if="row.type=='ADMIRE'">تارتۇق</span>
                    <span v-if="row.type=='VIP'">VIP</span>
                </template>
            </el-table-column>
            <el-table-column label="تارتۇقلىغان كىنو" prop="vid">
            </el-table-column>
            <el-table-column label="قوشۇلغان ۋاقتى" prop="create_time">
                <template slot-scope="{row}">
                    <span>{{moment(row.create_time).format('YYYY-MM-DD HH:mm:ss')}}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="center" style="margin:15px 0;">
            <el-col :span="8"></el-col>
            <el-col :span="8">
                <el-pagination background layout="prev, pager, next" :total="list.total" :page-size="pageSize" @current-change="handleCurrentChange">
                </el-pagination>
            </el-col>
            <el-col :span="8"></el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            moment,
            pageNo: 1,
            pageSize: 20,
            list: {
                list: [],
                total: 0
            },
            loading: false,
            form: {}
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        async getList() {
            try {
                this.loading = true;
                let res = await this.$http.get(
                    `/getOrderList?currentPage=${this.pageNo}&pageSize=${this.pageSize}`
                );
                let list = res.data.data;
                this.list = list;
                this.loading = false;
            } catch (error) {}
        },
        handleCurrentChange(page) {
            this.pageNo = page;
            this.getList();
        },
        async submit() {
            if (!this.form.uid) {
                this.$message.error("ئەزا نومۇرىنى كىرگۈزۈڭ");
            } else {
                let res = await this.$http.get(
                    `/getOrderList?uid=${this.form.uid}`
                );
                let list = res.data.data;
                this.list = list;
                this.$forceUpdate(() => {});
            }
        },
        handleJSON(data) {
            if (data) {
                return JSON.parse(data);
            } else {
                return {};
            }
        },
        reset() {
            this.getList();
            this.form = {};
        }
    }
};
</script>

<style lang="scss" scoped>
</style>